<template>
  <!-- 添加群 -->
  <div class="add-group">
    <div class="action">
      <div class="item flex-center" @click="onCancel">
        <span>取消</span>
      </div>
      <div class="item send flex-center" @click="onAssign">
        <span>完成</span>
      </div>
    </div>

    <div class="search-box flex-center">
      <div class="icon">
        <img src="@/assets/icons/search_chat.svg" alt class="svg-icon" />
      </div>
      <div class="input-wrapper">
        <input
          type="text"
          placeholder="搜索"
          v-model="searchText"
          @keyup.enter="onSearchEnter"
          @input="onInputChange"
        />
      </div>
    </div>

    <div class="member-list-wrapper">
      <ul class="member-list">
        <li
          class="list-item flexbox justify-around align-center"
          v-for="(item, i) of memberList"
          :key="i"
          @click="onMemberClicked(item, i)"
        >
          <div class="head">
            <img :src="item.headUrl" alt />
          </div>
          <div class="name ellipsis">{{ item.nickname }}</div>
          <div class="info">
            <!-- <i class="fa fa-check fa-lg" v-if="selectedItem.userId === item.userId"></i> -->

            <img
              src="@/assets/icons/check_black.svg"
              alt
              v-if="selectedItem.userId === item.userId"
              class="svg-icon"
            />
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script lang="ts">
import { Action, Mutation, Getter, namespace } from 'vuex-class';
import { Component, Vue, Prop } from "vue-property-decorator";
import MessageMixin from '@/mixins';
import { MsgTypeKV } from '@/api/socket/imClient';
import { Webim } from '@/utils/types';
import Cookie from 'js-cookie';
declare const $Vue: Vue;
declare const webim: Webim;
const chatModule = namespace('chatModule');
const userModule = namespace('userModule');
@Component<AssignOwner>({
  mixins: [MessageMixin],
})
export default class AssignOwner extends Vue {

  @userModule.State("groupMembers") groupMembers: any;
  @userModule.Action("saveCurrentUserFN") saveCurrentUserFN: any;
  @userModule.Action("saveGroupMembersFN") saveGroupMembersFN: any;
  @chatModule.Action("saveGroupSettingFN") saveGroupSettingFN: any;
  @chatModule.State("groupSetting") groupSetting: any;

  private groupNick: string = '';

  private selectedItem: any = {};

  private searchText: string = "";
  private eventList: Array<string> = [
    "$assginOwner",
    "$searchGroupMember",
    "$getGroupInfoByGroupId",
  ];

  // private memberList: Array<any> = [];

  // private get memberList(): Array<any> {
  //   let userId = localStorage.getItem('userId');
  //   return this.groupMembers.filter((item) => {
  //     return item.userId !=  userId
  //   });
  // }

  private memberList: Array<any> = [];

  private userId: any = '';

  protected mounted() {
    this.initEvents(this.eventList);
    this.userId = Number(localStorage.getItem('userId'));
    this.memberList = this.getMemberList();
  }

  private getMemberList() {
    return this.groupMembers.filter((item) => {
      return item.userId != this.userId;
    });
  }

  private onCancel() {
    this.$router.go(-1);

  }

  private onInputChange(val) {
    console.error(this.searchText);
    if (this.searchText === '') {
      this.memberList = this.getMemberList()
    } else {
      this.onSearchEnter();
    }

  }

  private onAssign() {
    let newOwner = this.selectedItem.nickname
    if (newOwner) {
      this.$createDialog({
        type: 'confirm',
        icon: 'cubeic-alert',
        title: '',
        content: `确认选择${newOwner}为新群主, 你将自动放弃群主身份.`,
        confirmBtn: {
          text: '确定',
          active: true,
          disabled: false,
          href: 'javascript:;'
        },
        cancelBtn: {
          text: '取消',
          active: false,
          disabled: false,
          href: 'javascript:;'
        },
        onConfirm: () => {
          this.assignNewOwner();
        },
        onCancel: () => {
        }
      }).show()
    }
  }

  /**
   * 遍历删除
   */
  private assignNewOwner() {

    // this.sendMessage(MsgTypeKV.kickOut, {
    //   imUserList: '',
    // });

    this.sendMessage(MsgTypeKV.assginOwner, {
      imAccount: this.selectedItem.imAccount,
    });

  }

  /**
 * 确认搜索
 */
  private onSearchEnter() {
    if (this.searchText === "") {
      return;
    }

    this.sendMessage(MsgTypeKV.searchGroupMember, {
      str: this.searchText,
    });
  }

  /**
 * 跳转到用户信息
 */
  private onMemberClicked(item: any, i: number) {
    // this.$set(this.memberList[i], 'selected', !item.selected);
    this.selectedItem = item;
  }

  private $assginOwner(data: any) {

    if (data.result === 0) {
      this.$router.go(-1);
      this.sendMessage(MsgTypeKV.getGroupInfoByGroupId, {
        groupId: this.groupSetting.info.groupId,
      });
      this.$createToast({
        txt: '设置成功',
        type: "warn",
        time: 3000
      }).show();
    } else {
      this.$createToast({
        txt: data.message,
        type: "warn",
        time: 3000
      }).show();
    }
  }

  private $searchGroupMember(data: any) {
    if (data.result === 0) {
      this.memberList = data.infoList.filter((item) => {
        return item.userId != this.userId;
      });
    } else {

    }
  }

  private $getGroupInfoByGroupId(data: any) {
    if (data.result === 0) {
      this.saveGroupSettingFN(data);
    } else {

    }
  }


}
</script>

<style lang="stylus" scoped>
.add-group
  width 100%
  height 100%
  background #fff
  padding 2px 
  box-sizing border-box
  position fixed 
  top 0 
  left 0
  .icon
    flex-basis 10%
  
.action
  height 40px
  width 100%
  display flex
  justify-content space-between
  align-items center
  padding 4px
  box-sizing border-box
  background #f1f1f1
  .item 
    min-width 64px
    height 100% 
    line-height 100% 
    &.send 
      background rgb(87, 189, 109)
      border-radius 4px
      color white

.member-list-wrapper
  width 100%
  .member-list
    padding 2px 6px
    .list-item 
      height 48px
      border-bottom 0.2px solid #f1f1f1
      .select
        flex-basis 10%
        width 10%
        .radio
          width 18px
          height 18px
          border-radius 50% 
          border 0.8px solid #a2a2a2
          img 
            width 18px 
            height 18px 
          &.selected
            background rgb(87, 189, 109)
            border-color rgb(87, 189, 109)
      .head
        flex-basis 10%
        width 10%
        img 
          width 36px 
          height 36px 
          border-radius 4px
      .name
        flex-basis 70%
        width 70%
      .info
        flex-basis 10%
        width 10%


.search-box 
  width 100% 
  height 36px
  border-bottom 0.8px solid #eee
  .icon
    flex-basis 10% 
  .input-wrapper 
    flex-basis 90% 
    input 
      width 100% 
      height 24px
      border-radius 2px
      padding 2px 4px
</style>

